<!DOCTYPE html>
<html>
 
<head>
    <meta charset="UTF-8">
	<script src="./js/jquery-1.11.3.min.js"></script>
	<script src="./js/bootstrap.bundle.min.js"></script>
    <link href="./css/bootstrap.min.css" rel="stylesheet">
    
    <!--引用所需库-->
	
	<script type="text/javascript" src="./js/js/jszip.min.js"></script>
    <script type="text/javascript" src="./js/docx-preview.js"></script>
</head>
 
<body class="vh-100 d-flex flex-column">
    <div class="hstack p-2 gap-2 bg-light">
        <button id="loadButton" class="btn btn-primary px-4" onclick="load()">Load</button>
    </div>
    <div class="flex-grow-1 d-flex flex-row" style="height: 0;">
        <!--预览使用的div，使用overflow-auto可有滚动条-->
        <div id="document-container" class="overflow-auto flex-grow-1 h-100"></div>
    </div>
    <script>
        function load() {
            //使用ajax使用get方法，responseType是arraybuffer
            $.ajax({
                url: 'http://www.fs.com/api.php?a=words&m=testview|api&token=123123&adminid=1',
                xhrFields: { responseType: "blob" }
            }).done((data) => {
                var container = document.querySelector("#document-container");
                docx.renderAsync(data, container, null, docx.defaultOptions);
            });
        }
    </script>
</body>
 
</html>